<template>
  <div>
    <h1>Bottom navigation（底部导航栏）</h1>
    <p>
      v-bottom-navigation 组件是侧边栏的替代品。
      它主要用于移动应用程序，并且有三个变体： icons 和 text和 shift。
    </p>

    <br />
    <h2>属性</h2>
    <br />

    <br />
    <h3>颜色</h3>
    <p>
      ** color ** prop对底部导航的背景使用一种颜色。 我们建议使用 ** light ** 和
      ** dark ** props 来正确对比文字颜色。
    </p>
    <v-bottom-navigation
      :value="value"
      color="primary"
      class="d-flex justify-end"
    >
      <v-btn>
        <span>Recents</span>

        <v-icon>mdi-history</v-icon>
      </v-btn>

      <v-btn>
        <span>Favorites</span>

        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn>
        <span>Nearby</span>

        <v-icon>mdi-map-marker</v-icon>
      </v-btn>
    </v-bottom-navigation>

    <br />
    <h3>grow</h3>
    <p>
      使用 ** grow ** 属性强制 v-btn 组件 填充 所有可用的空间。 按钮的最大宽度为
      168px 。根据 MD底部导航规格。
    </p>
    <v-bottom-navigation :value="value" color="teal" grow>
      <v-btn>
        <span>Recents</span>

        <v-icon>mdi-history</v-icon>
      </v-btn>

      <v-btn>
        <span>Favorites</span>

        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn>
        <span>Nearby</span>

        <v-icon>mdi-map-marker</v-icon>
      </v-btn>
    </v-bottom-navigation>

    <br />
    <h3>滚动时隐藏</h3>
    <p>
      v-bottom-navigation 组件在 滚动 时使用 hide-on-scroll 属性隐藏。
      这类似于&lt;a href=“/components/app bars/”&gt;v-app-bar支持的&lt;a
      href=“https://material.io/archive/guidelines/patterns/scrolling-technologies.html"&gt;滚动技术。
      在下面的示例中，上下滚动 以查看此行为。
    </p>
    <v-card class="overflow-hidden mx-auto" height="200" max-width="500">
      <v-bottom-navigation
        absolute
        hide-on-scroll
        horizontal
        scroll-target="#hide-on-scroll-example"
      >
        <v-btn color="deep-purple accent-4" text>
          <span>Recents</span>

          <v-icon>mdi-history</v-icon>
        </v-btn>

        <v-btn color="deep-purple accent-4" text>
          <span>Favorites</span>

          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn color="deep-purple accent-4" text>
          <span>Nearby</span>

          <v-icon>mdi-map-marker</v-icon>
        </v-btn>
      </v-bottom-navigation>

      <v-responsive
        id="hide-on-scroll-example"
        class="overflow-y-auto green"
        max-height="600"
      >
        <v-responsive height="1500"></v-responsive>
      </v-responsive>
    </v-card>

    <br />
    <h3>水平布局</h3>
    <p>
      使用 ** horizontal ** prop来调整按钮和图标的样式。
      此操作将按钮文本与提供的v-icon内联。
    </p>
    <v-bottom-navigation :value="value" color="primary" horizontal>
      <v-btn>
        <span>Recents</span>

        <v-icon>mdi-history</v-icon>
      </v-btn>

      <v-btn>
        <span>Favorites</span>

        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn>
        <span>Nearby</span>

        <v-icon>mdi-map-marker</v-icon>
      </v-btn>
    </v-bottom-navigation>

    <br />
    <h3>滚动阈值</h3>
    <p>
      修改 scroll-threshold 属性，以增加用户在隐藏 v-bottom-navigation
      之前必须滚动的距离。
    </p>
    <v-card class="mx-auto overflow-hidden" height="200" max-width="500">
      <v-bottom-navigation
        absolute
        color="white"
        hide-on-scroll
        horizontal
        scroll-target="#scroll-threshold-example"
        scroll-threshold="500"
      >
        <v-btn>
          <span>Recents</span>

          <v-icon>mdi-history</v-icon>
        </v-btn>

        <v-btn>
          <span>Favorites</span>

          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn>
          <span>Nearby</span>

          <v-icon>mdi-map-marker</v-icon>
        </v-btn>
      </v-bottom-navigation>

      <v-sheet
        id="scroll-threshold-example"
        class="overflow-y-auto pb-16"
        max-height="600"
      >
        <v-responsive height="1500"></v-responsive>
      </v-sheet>
    </v-card>

    <br />
    <h3>上档</h3>
    <p>
      ** shift ** prop 隐藏未激活时的按钮文本。 这为 v-bottom-navigation
      组件这提供了另一种视觉样式。
    </p>
    <v-bottom-navigation v-model="value" :background-color="color" dark shift>
      <v-btn>
        <span>Video</span>

        <v-icon>mdi-television-play</v-icon>
      </v-btn>

      <v-btn>
        <span>Music</span>

        <v-icon>mdi-music-note</v-icon>
      </v-btn>

      <v-btn>
        <span>Book</span>

        <v-icon>mdi-book</v-icon>
      </v-btn>

      <v-btn>
        <span>Image</span>

        <v-icon>mdi-image</v-icon>
      </v-btn>
    </v-bottom-navigation>

    <br />
    <h3>切换</h3>
    <p>
      v-bottom-navigation 的显示状态可以使用 input-value prop 进行切换。
      您也可以使用 v-model 来控制当前激活的按钮。
    </p>
    <div class="overflow-hidden">
      <div class="text-center mb-8">
        <v-btn color="deep-purple" outlined @click="active = !active">
          Toggle Navigation
        </v-btn>
      </div>

      <v-bottom-navigation v-model="value" :input-value="active" color="indigo">
        <v-btn>
          <span>Recents</span>

          <v-icon>mdi-history</v-icon>
        </v-btn>

        <v-btn>
          <span>Favorites</span>

          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn>
          <span>Nearby</span>

          <v-icon>mdi-map-marker</v-icon>
        </v-btn>
      </v-bottom-navigation>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    value: 1,
    active: true,
  }),
  computed: {
    color() {
      switch (this.value) {
        case 0:
          return "blue-grey";
        case 1:
          return "teal";
        case 2:
          return "brown";
        case 3:
          return "indigo";
        default:
          return "blue-grey";
      }
    },
  },
};
</script>